<template>
  <div class="WorkingSchedule" v-loading="loading">
    <el-form
      size="mini"
      ref="form"
      :model="form"
      label-position="top"
      class="myform"
    >
      <div>
          <el-form-item label="款号" class="myform-item">
              <el-input v-model="form.type_no" placeholder="请输入款号" style="width: 120px;" @keyup.enter.native="onSearch" clearable></el-input>
          </el-form-item>
          <el-form-item label="款名" class="myform-item">
              <el-input v-model="form.type_name" placeholder="请输入款名" style="width: 120px;" @keyup.enter.native="onSearch" clearable></el-input>
          </el-form-item>
        <el-form-item style="margin-top: 39px">
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button
            style="margin-left: 10px"
            size="mini"
            type="primary"
            @click="onUpdate"
            >更新库存</el-button
          >
          <el-button style="margin-left: 10px" size="mini" @click="onExcel"
            >生成导出数据</el-button
          >
        </el-form-item>

      </div>
      <div></div>
    </el-form>
<!--    <div class="date">-->
<!--      <div class="date-left">-->
<!--        <span>最后更新日期：{{ savetime }}</span>-->
<!--      </div>-->
<!--    </div>-->
    <el-table size="mini" :data="tableData" style="width: 100%" border>
      <el-table-column label="款号" align="center" prop="type_no">
      </el-table-column>
      <el-table-column label="SKU" align="center" prop="product_code">
      </el-table-column>
      <el-table-column label="款名" align="center" prop="product_name">
      </el-table-column>
      <!-- <el-table-column label="颜色规格" align="center" prop="a_color">
      </el-table-column>
      <el-table-column label="部件名称" align="center" prop="a_specifications"></el-table-column> -->
      <el-table-column
        label="部件"
        align="center"
        prop="a_parts"
      ></el-table-column>
      <!-- <el-table-column label="尺码" align="center" prop="a_size"></el-table-column> -->
      <el-table-column label="图片" align="center" prop="img" width="150">
        <template slot-scope="{ row }">
          <el-image
            :src="row.img"
            v-if="row.img"
            fit="fill"
            :lazy="true"
            :preview-src-list="[row.img]"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="本批预售(总预售)" align="center" prop="tm">
        <template slot-scope="{ row }">
          <div>
            <span style="color: #ffca42; font-size: 16px">{{
              row.tm.batch_yushou
            }}</span>
            <span style="color: #999">({{ row.tm.yushou }})</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="现货" align="center" prop="tm">
        <template slot-scope="{ row }">
          <div style="color: #71d5a1; font-size: 16px">{{ row.tm.xianhu }}</div>
        </template>
      </el-table-column>
      <!-- <el-table-column
        label="报次数"
        align="center"
        prop="bao_number"
      >
      </el-table-column> -->
      <el-table-column
        label="预计到货日期"
        align="center"
        prop="arrivaldate"
      ></el-table-column>
      <el-table-column
        label="更新时间"
        align="center"
        prop="kx_updatetime"
      ></el-table-column>
    </el-table>
    <paginationtwenty
      :form="form"
      :total="total"
      @paginationPostOrderTaskList="postAdminOperateGetamountdata"
    />
  </div>
</template>

<script>
import {
  postAdminOperateGetamountdata,
  postAdminOperateGet_lately_batch,
} from "@/api";
import pagination from "@/components/pagination.vue";
import paginationtwenty from "@/components/paginationtwenty.vue";

export default {
  components: { pagination, paginationtwenty },
  data() {
    return {
      browserHeight: "",
      isSubmit: true,
      loading: false,
      auditdialogVisible: false, // 审核
      auditdialogVisibleBatch: false, // 批量平台比例
      anticipateddialogVisibleBatch: false, // 批量预计到货期
      height: `${document.documentElement.clientHeight - 400}`,
      savetime: "",
      batch_date: "",
      batch_datePage: {
        slide: 0,
        page: 1,
      },
      type_no: "", // 款号
      date: "", // 日期
      form: {
        batch_date: "",
        type_no: "",
          type_name: "",
        page: 1,
        size: 20,
      },
      tableData: [],
      total: 1,
      json_data: [],
      json_fields: {
        款号: "type_no",
        SKU: "product_code",
        款名: "product_name",
        // "颜色规格": "a_color",
        // "部件名称": "a_specifications",
        部件: "a_parts",
        尺码: "a_size",
        图片: "img",
        天猫预售: "tm.yushou",
        天猫现货: "tm.xianhu",
        留存: "liu.yuliu",
        总数: "count",
        预计到货日期: "arrivaldate",
      },
    };
  },
  async activated() {
    let browserHeight =
      window.innerHeight ||
      document.documentElement.clientHeight ||
      document.body.clientHeight;
    this.browserHeight = browserHeight - 290;
    let form = this.form;
    this.postAdminOperateGetamountdata(form);
    // await this.postAdminOperateGet_lately_batch();

    // this.postAdminAdminOperateGet_platform_site()
  },
  methods: {
    onBatchDate(e) {
      this.form.batch_date = e;
      this.form.page = 1;
      let form = this.form;
      this.postAdminOperateGetamountdata(form);
    },
    onUpdateTime(e) {
      let { batch_datePage } = this;
      if (batch_datePage.slide == e) {
        batch_datePage.page = batch_datePage.page + 1;
        this.postAdminOperateGet_lately_batch();
      } else if (batch_datePage.page > 1) {
        batch_datePage.page = batch_datePage.page - 1;
        this.postAdminOperateGet_lately_batch();
      } else {
        batch_datePage.slide = e;
        this.postAdminOperateGet_lately_batch();
      }
    },
    async postAdminOperateGet_lately_batch() {
      let res = await postAdminOperateGet_lately_batch(this.batch_datePage);
      let date = res.date;
      if (this.batch_datePage.slide == 1) {
        date.reverse();
      }
      this.form.batch_date = date[0].batch_date;
      this.datelist = res.date;
      let form = this.form;
      this.postAdminOperateGetamountdata(form);
    },
    onExcel() {
      let obj = {
        type_no: this.form.type_no,
      };
      // window.location.href = "https://ssy.13yu.com/index.php/Admin/Excel/getStockexport?type_no="+this.form.type_no
      window.open(
        "https://ssy.13yu.com/index.php/Admin/Excel/getStockexport?type_no=" +
          this.form.type_no
      );
      // postAdminExcelGetStockexport(obj).then(res=>{
      //   console.log("res--->",res);
      // })
    },
    // 采购列表
    async postAdminOperateGetamountdata(data) {
      this.loading = true;
      this.form = data;
      postAdminOperateGetamountdata(data)
        .then((res) => {
          this.loading = false;
          console.log("采购列表", res);
          this.savetime = res.savetime;
          this.tableData = res.data;
          this.total = Number(res.total);
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    async startDownload() {
      let form = this.form;
      let data = JSON.parse(JSON.stringify(form));
      let arr = [];
      data.size = 1000;
      let total = this.total;
      let num = Math.ceil(total / 1000);
      for (let index = 1; index <= num; index++) {
        data.page = index;
        await postAdminOperateGetamountdata(data)
          .then((res) => {
            console.log("采购列表onFetch", res);
            arr.push(...res.data);
          })
          .catch((err) => {
            this.loading = false;
          });
        this.json_data = arr;
      }
    },
    // 搜索
    async onSearch() {
      this.form.page = 1;
      this.form.size = 20;
      await this.postAdminOperateGetamountdata(this.form);
      await this.postAdminOperateGetamountdata(this.form);
    },
  },
};
</script>

<style lang="scss" scoped>
.searchleft {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 3px;
  .searchleft-button {
    text-align: center;
    height: 28px;
    width: 60px;
    line-height: 28px;
    background: #eee;
    color: #000;
  }
  /deep/ .el-select {
    width: 140px;
    display: inline-block;
    input {
      font-size: 12px;
      border: none;
      background: none;
    }
  }
}
.date {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  /deep/ .el-button--mini {
  }
  .date-left {
    display: flex;
    align-items: center;
    .date-left-time {
      display: flex;
      align-items: center;
      .date-left-time-button {
        border: 1px solid #ddd;
        height: 28px;
        width: 36px;
        text-align: center;
        line-height: 28px;
        border-radius: 4px;
        color: #999;
      }
      .date-left-time-list {
        display: flex;
        margin: 0 10px;
        > div {
          height: 28px;
          width: 140px;
          text-align: center;
          line-height: 28px;
          border: 1px solid #ddd;
        }
        > div:not(:nth-child(1)) {
          border-left: none;
        }
        > div:nth-child(1) {
          border-top-left-radius: 4px;
          border-end-start-radius: 4px;
        }
        > div:nth-last-child(1) {
          border-top-right-radius: 4px;
          border-end-end-radius: 4px;
        }
      }
    }
  }
}
.borderSelect {
  border: 1px solid #2e71d6 !important;
  background: rgba(46, 113, 214, 0.1);
  color: #2e71d6;
}
.myform {
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
  }
  &-item {
    margin-right: 10px;
  }
}
.WorkingSchedule {
  background: #ffff;
  padding: 20px;
  border-radius: 2px;
  @include boxShadow;
}
</style>
